﻿<!DOCTYPE HTML>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8" />
<title>maxen-demo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="copyright" content="" />
<meta name="author" content="mruse|teachmyself@163.com" />
<script type="text/javascript">
var $ = function (id) {
	return typeof(id) == 'string' ? document.getElementById(id) : id;
}, mruse = {
	author : '@mruse',
	email : 'teachmyself@qq.com',
	ltrim : function (str) {
		var regExp = /^\s+/g;
		return str.replace(regExp, '');
	},
	rtrim : function (str) {
		var regExp = /\s+$/g;
		return str.replace(regExp, '');
	},
	trim : function (str) {
		return this.ltrim(this.rtrim(str));
	},
	isEmpty : function (str) {
		var regExp = /^\s+$/;
		return regExp.test(str) || str == '';
	},
	isInt : function (str) {
		var regExp = /^\d+$/;
		return regExp.test(str);
	},
	isMobile : function (str) {
		var regExp = /^\+{0,1}(86){0,1}-{0,1}\d{11}$/;
		return regExp.test(str);
	},
	isEmail : function (str) {
		var regExp = /^[a-z0-9_\-]+(\.[_a-z0-9\-]+)*@([_a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel)$/;
		return regExp.test(str);
	},
	show : function () {
		var txt = '';
		for (k in this) {
			txt += 'mruse.' + k + '(str) or str.mruse("' + k + '")' + "\n";
		}
		txt += '\u611F\u8C22\u4F7F\u7528 mruse.js, \u6709\u95EE\u9898\u8BF7\u8054\u7CFB teachmyself@qq.com \u6C9F\u901A\u4EA4\u6D41!';
		return txt;
	},
};
//console.log(mruse.show());
String.prototype.mruse = function (fn) {
	var v = this.valueOf(),
	f = fn.toString();
	return mruse[f](v);
};
Array.prototype.unique = function () {
	var newArray = [],
	temp = {};
	for (var i = 0, item; (item = this[i]) != null; i++) {
		if (!temp[item]) {
			newArray.push(item);
			temp[item] = true;
		};
	};
	return newArray;
};
Array.prototype.indexOf || (Array.prototype.indexOf = function (i, k) {
	k || (k = 0);
	var t = this.length;
	if (k < 0) {
		k = t + k;
	};
	for (; k < t; k++) {
		if (this[k] === i) {
			return k;
		};
	};
	return -1;
});


var maxen = {
	create : false, stat : 0,
	mItem : {'name':{},'age':{},'mobile':{},'email':{},'address':{},},
	mAttr : {'active':false,'required':false,'show':false,},
	mKval : {'name':'\u5b66\u5458\u59d3\u540d\uff1a','age':'\u5b66\u5458\u5e74\u9f84\uff1a','mobile':'\u8054\u7cfb\u624b\u673a\uff1a','email':'\u5e38\u7528\u90ae\u7bb1\uff1a','address':'\u8054\u7cfb\u5730\u5740\uff1a'},
	checkAll : function (attr){
		if (typeof(attr) == 'string'){
			document.form_create["item["+attr+"][active]"].checked = true;
			document.form_create["item["+attr+"][required]"].checked = true;
			document.form_create["item["+attr+"][show]"].checked = true;
		};
	},
	cancelAll : function(attr) {
		if (typeof(attr) == 'string'){
			document.form_create["item["+attr+"][active]"].checked = false;
			document.form_create["item["+attr+"][required]"].checked = false;
			document.form_create["item["+attr+"][show]"].checked = false;
		};
	},
	createFrom : function(){
		if (maxen.create) {
			alert('\u8868\u5355\u5df2\u7ecf\u521b\u5efa\uff0c\u8bf7\u52ff\u91cd\u590d\u521b\u5efa\uff01');
			return;
		};
		for (var mIv in maxen.mItem){
			for (var mAv in maxen.mAttr){
				maxen.mItem[mIv][mAv] = document.form_create["item["+mIv+"]["+mAv+"]"].checked ? true : false ;
				if (maxen.mItem[mIv][mAv]) maxen.stat += 1;
			};
		};
		if (maxen.stat == 0) {
			alert('\u60a8\u6ca1\u6709\u9009\u62e9\u4efb\u4f55\u9879\u76ee\uff0c\u8bf7\u8bbe\u7f6e\u597d\u540e\u518d\u521b\u5efa\u8868\u5355\uff01');
			return;
		};
		maxen.create = true;

		var newForm = '<form id="" name="" action="" method="">'
					+ '<input type="hidden" name="" />'
					+ '<input type="input" name="name" />'
					+ '<input type="input" name="mobile" />'
					+ '<input type="input" name="email" />'
					+ '</form>';
		
		for () {
			
		}
		
		var e = document.createElement('dl');
			e.innerHTML = '<input type="input" name="name" />';
			$('show-box').appendChild(e);
			
		//$('show-box').innerHTML = newForm;
		$('form_create').parentNode.innerHTML = '';
		//console.log($('form_create').parentNode.innerHTML);
	},
	setDefault : function(){
		alert(this);
	},
};
mLen = maxen.mItem.length;
for (var mAv in maxen.mAttr){
	for (var mIv in maxen.mItem){
		maxen.mItem[mIv][mAv] = maxen.mAttr[mAv];
	};
};

window.onload = function(){
	$('createBtn').onclick = maxen.createFrom;
};
</script>
<style type="text/css">
/* CSS-reset Create By MrUse|teachmyself@163.com */
body{margin:0; padding:0; font-size:12px; font-family:'微软雅黑','宋体','Arial Narrow','Arial'; line-height:22px; background:#fff;}
div,span,p,ul,ol,li,dl,dt,dd,table,tr,th,td{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
a:link{text-decoration:none;}
a:hover{cursor:pointer;}
ul,ol{list-style:none;}
img{border:none;}

table{border-collapse:collapse} /*
table tr:hover{background:#ddd;} */
table tr th{background:#eee;}
table tr th,table tr td{border:#999 solid 1px; padding:10px; text-align:center;}

/* CSS-common */
.w-960{width:960px; margin:0 auto;}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.top10{margin-top:10px;}
.left10{margin-left:10px;}
.btn{cursor:pointer;}

/* CSS-page */
.wrap{height:auto; color:#333}

.set-area{height:auto;}

.show-area{height:auto;}

.tips{width:100%; height:100%; background:#000; /*position:absolute;*/ top:0; left:0; filter:alpha(opacity=60); opacity:0.6;}
.tips .txt{}
</style>
</head>

<body>
<script type="text/javascript">
/*
	1. 设置项目: 名称，类型，
	2. 设置项目: 是否启用，是否必填，是否显示
	3. 显示表单
*/
</script>
<div class="wrap w-960 top10">
	<div class="set-area w-960 top10">
		<form name="form_create" id="form_create" action="" method="" >
			<input type="hidden" name="defalut[city]" value="0" />
			<input type="hidden" name="defalut[center]" value="0" />
			<table summary="" cellpadding="0" cellspacing="0">
				<tr>
					<th>项目</th>
					<th>是否启用</th>
					<th>是否必填</th>
					<th>是否显示</th>
					<th>全选</th>
				</tr>
				<tr>
					<th>学员姓名</th>
					<td><input type="checkbox" name="item[name][active]" class="" title="是否启用" /></td>
					<td><input type="checkbox" name="item[name][required]" class="" title="是否必填,"  /></td>
					<td><input type="checkbox" name="item[name][show]" class="" title="是否显示"  /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('name')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('name')" />
					</td>
				</tr>
				<tr>
					<th>学员年龄</th>
					<td><input type="checkbox" name="item[age][active]" class="" title="是否启用" /></td>
					<td><input type="checkbox" name="item[age][required]" class="" title="是否必填,"  /></td>
					<td><input type="checkbox" name="item[age][show]" class="" title="是否显示"  /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('age')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('age')" />
					</td>
				</tr>
				<tr>
					<th>联系手机</th>
					<td><input type="checkbox" name="item[mobile][active]" class="" title="是否启用" /></td>
					<td><input type="checkbox" name="item[mobile][required]" class="" title="是否必填"  /></td>
					<td><input type="checkbox" name="item[mobile][show]" class="" title="是否显示"  /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('mobile')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('mobile')" />
					</td>
				</tr>
				<tr>
					<th>常用邮箱</th>
					<td><input type="checkbox" name="item[email][active]" class="" title="是否启用" /></td>
					<td><input type="checkbox" name="item[email][required]" class="" title="是否必填,"  /></td>
					<td><input type="checkbox" name="item[email][show]" class="" title="是否显示"  /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('email')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('email')" />
					</td>
				</tr>
				<tr>
					<th>联系地址</th>
					<td><input type="checkbox" name="item[address][active]" class="" title="是否启用" /></td>
					<td><input type="checkbox" name="item[address][required]" class="" title="是否必填,"  /></td>
					<td><input type="checkbox" name="item[address][show]" class="" title="是否显示"  /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('address')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('address')" />
					</td>
				</tr>
				<tr>
					<th>预约城市</th>
					<td colspan="3">
						<label for="city">城市</label>
						<select name="item[city]" id="city">
							<option value="">请选择</option>
							<option value="">北京</option>
							<option value="">天津</option>
							<option value="">广州</option>
						</select>
						<label for="center" class="left10">学习中心</label>
						<select name="item[city]">
							<option value="">请选择</option>
							<option value="">迈格森北京公主坟凯德晶品中心</option>
							<option value="">迈格森北京金源中心</option>
							<option value="">迈格森北京万通中心</option>
						</select>
					</td>
					<td>
						<input type="button" name="" class="btn" title="设为默认" value="设为默认" onclick="maxen.setDefault('address')" />
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<input type="button" id="createBtn" class="btn" value="创建表单" />
						<input type="reset" id="reset" class="btn" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</div><!--// .set-area|End -->
	
	<div class="show-area w-960 top10">
		<div id="show-box">
			<form id="" name="" method="" action="">
				<dl id="form_dl">
					<dt></dt>
				</dl>
			</form>
		</div>
	</div><!--// .show-area|End -->
</div>

<div class="tips" id="tips"></div>
</body>
</html>